<template>
	<view class="px-2" style="margin-top: 100rpx">
		<view class="flex flex-column justify-center">
			<view class="border-bottom flex align-center">
				<view class="pr-1">+86</view>
				<input type="text" class="border-bottom flex-1" v-model="phone" style="height: 80rpx" placeholder="手机号" />
			</view>

			<view class="border-bottom flex align-center mt-2">
				<input class="flex-1" type="text" style="height: 80rpx" v-model="yzm" placeholder="请输入验证码" />
				<view
					class="flex justify-center align-center font-sm bg-main-disabled text-white"
					style="width: 150rpx; height: 50rpx"
					:style="time > 0 ? { backgroundColor: '#F87F97!important' } : ''"
					:class="disable ? 'bg-main' : ''"
					@click="getyzm"
				>
					{{ time > 0 ? time : '获取验证码' }}
				</view>
			</view>
		</view>
		<view class="pb-4" style="margin-top: 130rpx">
			<button style="border-radius: 50rpx" class="text-light bg-main-disabled mt-3" :class="istrue ? 'bg-main' : ''" @click="Bind">绑定并登录</button>
		</view>
	</view>
</template>

<script>
	import {getcode,bindphone} from '@/request/Api/login.js'
export default {
	data() {
		return {
			phone: '',
			yzm: '',
			time: 0,
			userInfo: {}
		};
	},
	onLoad(e) {
		this.userInfo = JSON.parse(e.userInfo);
	},
	computed: {
		disable() {
			return this.checkPhone();
		},
		istrue() {
			return this.checkPhone() && this.yzm !== '';
		}
	},
	methods: {
		Bind() {
			const data = {
				code:this.yzm,
				phone: this.phone,
				type: this.userInfo.type,
				openid: this.userInfo.openid,
				nickname: this.userInfo.nickname,
				avatarUrl: this.userInfo.avatarUrl
			};
			if(this.checkPhone()&&this.yzm!=='')
			{
				bindphone(data).then((res)=>{
					if(res.code===0)
					{
						uni.showToast({
							title: "该手机号已经被绑定",
							icon: 'none',
							})
					}
					else{
						uni.showToast({
							title: "绑定成功",
							icon: 'none',
							success: () => {
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('userInfo', res.data.userInfo);
								console.log(res)
								console.log(uni.getStorageSync("token"))
								uni.switchTab({
									url: '/pages/index/index',
									})
								}
							})
					}
				})
			}
			},
		checkPhone() {
			let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if (reg.test(this.phone)) {
				return true;
			}
			return false;
		},
		getyzm() {
			if (this.time > 0) {
				return;
			}
			if (this.checkPhone()) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});
				this.time = 60;
				let timer = setInterval(() => {
					this.time--;
					if (this.time <= 0) {
						clearInterval(timer);
					}
				}, 1000);
				getcode({phone:this.phone})
			}
		}
	}
};
</script>

<style></style>
